<template>
  <div class="box">
    <div class="a1">
      <div class="b1">
        <h3>全部特权</h3>
        <ul class="b1_ul">
          <li><a href="#vip1">外显特权</a></li>
          <li><a href="#vip2">财富特权</a></li>
          <li><a href="#vip3">音质特权</a></li>
          <li><a href="#vip4">下载特权</a></li>
          <li><a href="#vip5">家族特权</a></li>
          <li><a href="#vip6">投稿特权</a></li>
          <li><a href="#vip7">上传特权</a></li>
        </ul>
      </div>
      <div class="b2">
        <div class="vip_class" id="vip1  ">
          <span class="sp1"></span>
          外显特权
        </div>
        <div class="vip_title1 vip_title">
          <p>红色昵称，万千动态之中做最闪亮的一族！</p>
          <p>尊贵图标，VIP用户专属的身份标志，尊贵无处不在！</p>
          <img
            src="https://imgcache.gtimg.cn/mediastyle/kge_v3/img/vip_show.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="vip_class" id="vip2">
          <span class="sp2"></span>
          财富特权
        </div>
        <div class="vip_title vip_title2">
          <p>
            VIP用户每天登陆可以领取更多鲜花，坐拥海量鲜花，为作品打榜更给力！
          </p>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="" width="180">
            </el-table-column>
            <el-table-column prop="address" label="领取鲜花"> </el-table-column>
          </el-table>
        </div>
        <div class="vip_class" id="vip3  ">
          <span class="sp3"></span>
          音质特权
        </div>
        <div class="vip_title vip_title2">
          <p>
            享受320kaac高品质伴奏，清晰无杂音，此类伴奏可以在录音时合成高品质作品，带给你和你的听众们更爽的视听感受
          </p>
          <el-table :data="tableData1" border style="width: 100%">
            <el-table-column prop="axe" label="" width="180"> </el-table-column>
            <el-table-column prop="name" label="伴奏质量"> </el-table-column>
            <el-table-column prop="address" label="作品质量"> </el-table-column>
          </el-table>
        </div>
        <div class="vip_class" id="vip4  ">
          <span class="sp4"></span>
          下载特权
        </div>
        <div class="vip_title vip_title4">
          <p>
            VIP用户专享下载与导出特权，支持下载全站任意作品，随时随地免流量播放；支持导出自己的作品至手机本地，便于存储和管理。
          </p>
          <img
            src="https://imgcache.gtimg.cn/mediastyle/kge_v3/img/vip_down.png"
            alt=""
            srcset=""
          />
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column prop="axe" label="" width="180"> </el-table-column>
            <el-table-column prop="name" label="下载作品数"> </el-table-column>
            <el-table-column prop="address" label="导出作品数">
            </el-table-column>
          </el-table>
        </div>
        <div class="vip_class" id="vip5  ">
          <span class="sp5"></span>
          家族特权
        </div>
        <div class="vip_title vip_title5">
          <p>
            创建家族，聚拢人气，人多力量大，家族势力强！每个VIP至多创建1个家族
          </p>
          <img
            src="https://imgcache.gtimg.cn/mediastyle/kge_v3/img/vip_family.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="vip_class" id="vip6  ">
          <span class="sp6"></span>
          投稿特权
        </div>
        <div class="vip_title vip_title6">
          <p>
            投稿自己的优秀作品，去获得更多听众的支持，VIP用户每月限1次投稿机会
          </p>
          <img
            src="https://imgcache.gtimg.cn/mediastyle/kge_v3/img/vip_file.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="vip_class" id="vip7  ">
          <span class="sp7"></span>
          上传特权
        </div>
        <div class="vip_title vip_title6">
          <p>
            在站外使用更强大的编辑工具生成优质作品，上传至全民K歌个人主页，更专业更吸粉。目前上传作品仅支持在PC官网操作(kg.qq.com)。
          </p>
          <img
            src="https://imgcache.gtimg.cn/mediastyle/kge_v3/img/vip_up.png"
            alt=""
            srcset=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "普通用户",
          address: "基础",
        },
        {
          name: "VIP1",
          address: "日领取＋15",
        },
        {
          name: "VIP2",
          address: "日领取＋18",
        },
        {
          name: "VIP3",
          address: "日领取＋20",
        },
        {
          name: "VIP4",
          address: "日领取＋22",
        },
        {
          name: "VIP5",
          address: "日领取＋25",
        },
        {
          name: "VIP6",
          address: "日领取＋28",
        },
        {
          name: "VIP7",
          address: "日领取＋30",
        },
      ],
      tableData1: [
        {
          axe: "普通用户",
          name: "标准96kaac",
          address: "标准合成",
        },
        {
          axe: "会员",
          name: "HQ高品质320kaac",
          address: "高品质录音、合成",
        },
      ],
      tableData2: [
        {
          axe: "普通用户",
          name: "10首体验资格",
          address: "无",
        },
        {
          axe: "VIP1",
          name: "100首／月",
          address: "10首／月",
        },
        {
          axe: "VIP2",
          name: "120首／月",
          address: "12首／月",
        },
        {
          axe: "VIP3",
          name: "150首／月",
          address: "15首／月",
        },
        {
          axe: "VIP4",
          name: "180首／月",
          address: "18首／月",
        },
        {
          axe: "VIP5",
          name: "200首／月",
          address: "20首／月",
        },
        {
          axe: "VIP6",
          name: "230首／月",
          address: "22首／月",
        },
        {
          axe: "VIP7",
          name: "260首／月",
          address: "25首／月",
        },
        {
          axe: "VIP8",
          name: "300首／月",
          address: "30首／月",
        },
      ],
    };
  },
  mounted() {
    // this.axios
    //   .get("https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2")
    //   .then((response) => {
    //     let list = response.data.result.list;
    //     this.date = [...list]
    //      console.log(this.date);
    //   });
  },
};
</script>


<style scoped>
.a1 {
  position: relative;
  padding-left: 150px;
}
.b1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
}
.b1 h3 {
  font-size: 18px;
  color: #fc1717;
  font-weight: 400;
  margin-bottom: 15px;
}
.b1_ul li {
  margin-bottom: 10px;
}
.b1_ul a {
  display: block;
  font-size: 16px;
  color: grey;
}
/* 增删样式 */
.b1_ul_hove {
  color: #000;
}

.b2 {
  padding: 42px 0;
}
.vip_class {
  text-align: left;
  font-size: 24px;
  color: #fff;
  line-height: 100px;
  padding-left: 50px;
  height: 100px;
  background: #ff5663
    url("https://kg.qq.com/gtimg/mediastyle/kge_v3/img/vip_title.jpg?max_age=2592000&v=73d2c1ead0169b938c65c653c8484e64")
    no-repeat left top;
}
.vip_class span {
  display: inline-block;
  width: 67px;
  height: 48px;
  margin-right: 20px;
  vertical-align: middle;
  background-image: url("https://kg.qq.com/gtimg/mediastyle/kge_v4/sprite/vip.png?max_age=2592000&v=09c43fb3c662d24e4cf6b26964a63db9");
}
.sp1 {
  background-position: -316px -297px;
}
.sp2 {
  background-position: -237px -297px;
}
.sp3 {
  background-position: -79px -297px;
}
.sp4 {
  background-position: -248px -207px;
}
.sp5 {
  background-position: 0 -297px;
}
.sp6 {
  background-position: -169px -207px;
}
.sp7 {
  background-position: -158px -297px;
}
.vip_title {
  text-align: left;
  padding: 30px 0;
}
.vip_title p {
  display: block;
  margin-bottom: 20px;
}
</style>